<template>
  <div class="main-container">
    <div class="video-container">
      <video
        ref="videoElement"
        class="video-player"
        autoplay
        controls
        @play="onPlay"
        @pause="onPause"
        @ended="onEnded"
      >
        Your browser does not support the video tag.
      </video>
      <div class="controls">
        <button @click="startVideoStreamAndRecording" class="control-button start">Start Stream and Recording</button>
        <button @click="stopVideoStreamAndRecording" class="control-button stop">Stop Stream and Recording</button>
      </div>
    </div>

    <!-- 侧边栏 -->
    <el-aside :style="sidebarStyle">
      <div class="sidebar-header">
        <h3>媒体库</h3>
        <el-button @click="toggleSidebar" icon="el-icon-arrow-right" type="text" class="icon-only-button"></el-button>
      </div>
      <el-collapse>
        <el-collapse-item title="下载链接">
  <div class="card-content" style="display: flex; flex-direction: column;">
    <el-card 
      v-for="url in downloadUrls" 
      :key="url.timestamp" 
      class="download-card" 
      style="margin-bottom: 10px; width: 100%;" 
    >
      <div class="card-content" style="display: flex; justify-content: space-between; align-items: center;">
        <span>{{ url.name }}</span>
        <el-button
          @click="url.downloaded ? openVideo(url.link) : downloadVideo(url.link, url.name)"
          class="download-button"
        >
          {{ url.downloaded ? '打开' : '下载' }}
        </el-button>
      </div>
    </el-card>
    <p v-if="downloadUrls.length === 0">没有可下载的视频。</p>
  </div>
</el-collapse-item>
      </el-collapse>
    </el-aside>

    <!-- 展开按钮（折叠状态下显示） -->
    <el-button
      v-if="!isSidebarVisible"
      class="expand-btn"
      @click="toggleSidebar"
      icon="el-icon-arrow-left"
      circle
    ></el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stream: null,
      mediaRecorder: null,
      chunks: [],
      isRecording: false,
      isSidebarVisible: true,
      downloadUrls: [] // 存储下载链接和时间戳
    };
  },
  computed: {
    sidebarStyle() {
      return {
        width: '300px',
        backgroundColor: '#000000',
        color: '#ecf0f1',
        position: 'fixed',
        top: '0',
        right: this.isSidebarVisible ? '0' : '-300px',
        height: '100%',
        transition: 'right 0.3s ease',
        boxShadow: '0 2px 10px rgba(0, 0, 0, 0.5)',
      };
    }
  },
  methods: {
    toggleSidebar() {
      this.isSidebarVisible = !this.isSidebarVisible;
    },
    openVideo(link) {
      window.open(link);
    },
    async startVideoStreamAndRecording() {
      try {
        this.stream = await navigator.mediaDevices.getUserMedia({ video: true });
        this.$refs.videoElement.srcObject = this.stream;

        this.mediaRecorder = new MediaRecorder(this.stream);
        this.mediaRecorder.ondataavailable = (event) => {
          if (event.data.size > 0) {
            this.chunks.push(event.data);
          }
        };
        this.mediaRecorder.onstop = () => {
          const blob = new Blob(this.chunks, { type: 'video/webm' });
          const timestamp = new Date().toLocaleString().replace(/:/g, '-');
          const url = URL.createObjectURL(blob);
          this.downloadUrls.push({ link: url, name: `录制-${timestamp}.webm`, timestamp, downloaded: false });
          this.chunks = [];
        };
        this.mediaRecorder.start();
        this.isRecording = true;
      } catch (error) {
        console.error('Error accessing webcam or starting recording:', error);
      }
    },
    stopVideoStreamAndRecording() {
      if (this.stream) {
        if (this.mediaRecorder && this.isRecording) {
          this.mediaRecorder.stop();
          this.isRecording = false;
        }
        this.stream.getTracks().forEach(track => track.stop());
        this.$refs.videoElement.srcObject = null;
        this.stream = null;
      }
    },
    downloadVideo(link, name) {
      const a = document.createElement('a');
      a.href = link;
      a.download = name;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);

      // 标记为已下载
      const video = this.downloadUrls.find(url => url.link === link);
      if (video) {
        video.downloaded = true;
      }
    },
    onPlay() {
      console.log('Video is playing');
    },
    onPause() {
      console.log('Video is paused');
    },
    onEnded() {
      console.log('Video has ended');
    }
  }
}
</script>

<style scoped>
.main-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.video-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #000;
  border-radius: 8px;
  overflow: hidden;
}

.video-player {
  width: 100%;
  height: 650px;
  border: none;
}

.controls {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

.control-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  margin: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.control-button:hover {
  background-color: #0056b3;
}

.control-button.start {
  background-color: #28a745;
}

.control-button.start:hover {
  background-color: #218838;
}

.control-button.stop {
  background-color: #dc3545;
}

.control-button.stop:hover {
  background-color: #c82333;
}

/* 侧边栏样式 */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  background: #212121;
  border-bottom: 1px solid #000000;
}

.icon-only-button {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  font-size: 24px;
}

.sidebar-header h3 {
  color: #ecf0f1;
  margin: 0;
  font-size: 18px;
}

/* 下载卡片样式 */
.download-card {
  margin: 10px 0;
}

.card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.download-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.download-button:hover {
  background-color: #0056b3;
}

/* 展开按钮样式 */
.expand-btn {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #3498db;
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
</style>